<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>故宫购票系统 - 购票</title>
    <link rel="stylesheet" href="../css/purchase-tickets.css">
    <style>
        body {
            display: flex;

        }

        .content {
            flex: 1;
            padding: 20px;
        }

        .sidebar {
            width: 250px;
            padding: 20px;
            background-color: #82111f;

            //border-left: 1px solid #ccc;
        }

        #openingHours {
            //border: 1px solid #ccc;
            background-color: #f8d99e;

            padding: 10px;
        }
    </style>
</head>

<body>
<div class="content">
    <!-- 订大门票 -->
    <h2>订大门票</h2>
    <form id="bookGateForm">
        <label for="userId">用户 ID：</label>
        <input type="number" id="userId1" required><br>
        <label for="quantity1">数量：</label>
        <input type="number" id="quantity1" required><br>
        <label for="totalPrice1">总价：</label>
        <input type="number" id="totalPrice1" step="0.01" readonly><br>
        <label for="date1">日期：</label>
        <input type="date" id="date1" required><br>
        <input type="submit" value="预订">
    </form>

    <!-- 订馆中馆门票 -->
    <h2>订馆中馆门票</h2>
    <form id="bookExhibitionForm">
        <label for="userId">用户 ID：</label>
        <input type="number" id="userId2" required><br>
        <label for="quantity2">数量：</label>
        <input type="number" id="quantity2" required><br>
        <label for="type1">门票类型：</label>
        <select id="type1" required onchange="calculateExhibitionTotal()">
            <option value="EXHIBITION1">珍宝馆门票</option>
            <option value="EXHIBITION2">钟表馆门票</option>
            <option value="EXHIBITION1_AND_2">珍宝馆和钟表馆套票</option>
        </select><br>
        <label for="totalPrice2">总价（元）：</label>
        <input type="number" id="totalPrice2" step="0.01" readonly><br>
        <label for="date2">日期：</label>
        <input type="date" id="date2" required><br>
        <input type="submit" value="预订">
    </form>

    <!-- 查询订票记录 -->
    <h2>查询订票记录</h2>
    <form id="getBookingRecordsForm">
        <label for="userId">用户 ID：</label>
        <input type="number" id="userId" required><br>
        <input type="submit" value="查询">
        <table id="bookingRecordsTable">
            <thead>
            <tr>
                <th>订单编号</th>
                <th>用户 ID</th>
                <th>票 ID</th>
                <th>数量</th>
                <th>总价(元)</th>
                <th>状态</th>
                <th>日期</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </form>

    <!-- 查询每日余票 -->
    <h2>查询每日余票</h2>
    <form id="getDailyRemainingTicketsForm">
        <label for="type2">门票类型：</label>
        <select id="type2" required>
            <option value="GATE">大门票</option>
            <option value="EXHIBITION1">展览 1 门票</option>
            <option value="EXHIBITION2">展览 2 门票</option>
            <option value="EXHIBITION1_AND_2">展览 1 和 2 门票</option>
        </select><br>
        <input type="submit" value="查询">
        <p id="remainingTickets"></p>
    </form>

    <!-- 退票 -->
    <h2>退票</h2>
    <form id="refundForm">
        <label for="orderId">订单 ID：</label>
        <input type="number" id="orderId" required><br>
        <input type="submit" value="退票">
    </form>

    <br>
    <button onclick="window.location.href='login.html'">退出登录</button>
</div>

<div class="sidebar">
    <h2>购票须知</h2>
    <div id="openingHours">
        <p><strong>门票价格</strong></p>

        <p>大门票：40 元</p>
        <p>珍宝馆门票：20 元</p>
        <p>钟表馆门票：30 元</p>
        <p>珍宝馆和钟表馆套票：45 元 (优惠价)</p>

    </div>
    <br>
    <div id="openingHours">
        <p><strong>开放时间</strong></p>
        <p><strong>旺季 （4月1日至10月31日）：</strong></p>
        <p>开放入馆时间 8:30 </p>
        <p>停止入馆时间 16:00</p>
        <p>珍宝馆、钟表馆停止入馆时间 16:10</p>
        <p>闭馆时间 17:00</p>

        <p><strong>淡季 （11月1日至次年3月31日）：</strong></p>
        <p>开放入馆时间 8:30 </p>
        <p>停止入馆时间 15:30 </p>
        <p>珍宝馆、钟表馆停止入馆时间 15:40 </p>
        <p>闭馆时间 16:30 </p>
    </div>
</div>

<script src="../js/purchase-tickets.js"></script>
</body>
</html>
